<template>
  <el-dialog v-model="visible" width="550px" height="50vh" destroy-on-close @closed="$emit('closed')" :close-on-click-modal="false">
    <el-row :gutter="5">
      <sc-upload-file :apiObj="apiObj" :data="form" drag :limit="1" :onSuccess="onSuccess" :showFileList="false" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
        <el-icon class="el-icon--upload">
          <el-icon-upload-filled/>
        </el-icon>
        <div class="el-upload__text">将文件拖入到这里或 <em>点击上传</em></div>
      </sc-upload-file>
    </el-row>
  </el-dialog>
</template>

<script>
/**
 * 批量导入员工信息
 *
 * @version 1.0
 */
import { ElNotification } from "element-plus";

export default {
  data() {
    return {
      id: null,
      form: {},
      saving: false,
      loading: true,
      visible: false,
      apiObj: this.$API.employee.batch
    }
  },
  mounted() {

  },
  methods: {
    open() {
      this.visible = true;
      return this
    },
    onSuccess(res) {
      const {success, data} = res;
      if (success) {
        const {existList = [], incorrectList = []} = data;
        Promise.resolve().then(() => {
          if (existList.length > 0) {
            ElNotification({
              type: 'warning',
              title: '已存在清单',
              message: this.render(existList),
              dangerouslyUseHTMLString: true,
              duration: 0,
            });
          }
        }).then(() => {
          if (incorrectList.length > 0) {
            ElNotification({
              type: 'warning',
              title: '身份证不正确清单',
              message: this.render(incorrectList),
              dangerouslyUseHTMLString: true,
              duration: 0,
            });
          }
        }).then(() => {
          if (existList.length === 0 && incorrectList.length === 0) {
            this.$message.success("导入成功");
          }
        });
      } else {
        this.$alert(res.message, "提示", {type: 'error'})
      }
      this.$emit('success');
      this.visible = false;
      return this.visible = false;
    },
    render(dataList) {
      const items = dataList.map(ele => `<li>${ele}</li>`);
      return `<ol>${items.join('')}</ol>`;
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.el-notification) {
  max-height: 45vh;
  overflow-y: auto;
}
</style>
